<script setup lang="ts">
import { ref } from 'vue'
import {
  AllApplication,
  Home,
  ElectricDrill,
  HangerTwo,
  ActivitySource,
  MenuFoldOne,
  MenuUnfoldOne,
} from '@icon-park/vue-next'
import useMenuStore from './useMenuStore'
const emit = defineEmits<{
  (e: 'menuChange', menu: string): void
}>()
const collectionList = ref([
  {
    icon: AllApplication,
    name: '瓷砖数据',
  },
  {
    icon: Home,
    name: '户型数据',
  },
  {
    icon: ElectricDrill,
    name: '木工数据',
  },
  {
    icon: HangerTwo,
    name: '柜子数据',
  },
  {
    icon: ActivitySource,
    name: '其他数据',
  },
])
const handleDlChild = (menu: string) => {
  emit('menuChange', menu)
}

const menuStore = useMenuStore()
</script>

<template>
  <div class="admin-menu drag border-r" :class="{ close: !menuStore.menuState }">
    <div class="menuState nodrag" @click="menuStore.toggleMenu">
      <MenuUnfoldOne
        theme="filled"
        size="32"
        fill="#888888"
        class="cursor-pointer duration-300"
        v-if="menuStore.menuState" />
      <MenuFoldOne theme="filled" size="32" fill="#888888" class="cursor-pointer duration-300" v-else />
    </div>
    <div class="container nodrag">
      <dl v-for="(menu, index) of collectionList" :key="index" @click="handleDlChild(menu.name)">
        <section class="flex items-center">
          <component
            :is="menu?.icon"
            :size="!menuStore.menuState ? '40' : '24'"
            fill="#dcdcdc"
            theme="filled"
            :class="!menuStore.menuState ? '' : 'mr-2'" />
        </section>
        <span class="text-base menuTitle hover:text-[#FF9600] text-[#888888]">{{ menu.name }}</span>
      </dl>
    </div>
  </div>
</template>
<style lang="scss">
.admin-menu {
  @apply z-10 bg-white h-full absolute md:relative overflow-auto;
  .menuState {
    @apply flex justify-center mt-3 cursor-pointer;
  }
  .container {
    @apply mt-3 z-30 w-[150px];
    dl {
      @apply text-[#888888] text-sm relative p-2 cursor-pointer items-center flex justify-center;
    }
  }
  &.close {
    @apply w-[64px];
    .container {
      @apply flex flex-col gap-3 w-[64px];
      dl {
        .menuTitle {
          @apply hidden;
        }
      }
    }
  }
}
</style>
